<template>
  <div>
  <div class="register">
    <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <h3>注册</h3>
        <el-input placeholder="输入姓" v-model="ruleForm.surname" clearable></el-input>
        <el-input placeholder="输入名" v-model="ruleForm.name" clearable></el-input>
        <el-input placeholder="输入邮箱" v-model="ruleForm.email" clearable></el-input>
        <el-input placeholder="输入密码" v-model="ruleForm.password" clearable></el-input>
        <div class="btn-reg"><el-button>注册</el-button></div>
        <p>登录?</p>
      </el-form>
  </div>
  <!-- <Footer></Footer> -->
  </div>
</template>

<script>
import Footer from './Footer'
export default {
data() {
    return {
      ruleForm: {
        surname: '',
        name: '',
        email: '',
        password: '',
      },
      rules: {
        name: [
          { required: true, message: "请输入账户", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      }
    };
  },
  components: {Footer},
}
</script>

<style lang="less" scoped>
@media screen and (max-width: 1024px) {
  @import url(../assets/css/mobile_loginregister.less);
}
@media screen and (min-width: 1024px) {
  @import url(../assets/css/pc_loginregister.less);
}
</style>>

